import { createVNode, render } from "vue"
import XtxConfirm from './xtx-confirm.vue'

// 准备div
const div = document.createElement('div')
div.setAttribute('class', 'xtx-confirm-container')
document.body.appendChild(div)

// 该函数渲染XtxConfirm组件，标题和文本
// 函数的返回值是promise对象
export default ({ title, text }) => {
    return new Promise((resolve, reject) => {
        const submitCallback = () => {
            // 参数1 要被渲染的虚拟 DOM，必选 
            // 参数2 要渲染的位置，必选
            render(null, div)
            resolve()
        }
        const cancelCallback = () => {
            render(null, div)
            reject(new Error('点击取消'))
        }
        // 1. 渲染组件
        // 2. 点击确认按钮，触发resolve同时销毁组件
        // 3. 点击取消按钮，触发reject同时销毁组件
        // (标签, {属性},内容)
        const vnode = createVNode(XtxConfirm,{title, text, submitCallback, cancelCallback})
        render(vnode,div)
    })
}